<template>
  <div style="margin-top: 80px"></div>
  <CenterBase>
    <template #CenterBase>
      <div>
        <ShowProblem :content="question" />
      </div>
      <div style="margin-top: 50px">
        <div>
          <span>适合在大屏编辑，采用 Markdown 编辑，教程请看<a href="https://www.runoob.com/markdown/md-tutorial.html" target="_blank">这里</a>，公式编辑教程<a target="_blank" href="https://www.jianshu.com/p/383e8149136c">查看</a>。
          </span>
        </div>
        <div>
          <VueEditor ref="VEditorContent" />
        </div>
        <div style="margin-top: 20px">
          <a-button @click="submitData" type="primary" :disabled="submitStatus">提交</a-button>
        </div>
      </div>
    </template>
  </CenterBase>
</template>

<script lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { Button, message } from 'ant-design-vue'

import { getQusById, getUserAnswer, userAddAnswer } from '@/service'

import CenterBase from '@/components/CenterBase.vue'
import ShowProblem from '@/components/ShowProblem.vue'
import VueEditor from '@/components/VueVditor.vue'
import { decodeCT, decodeID, decodeValue } from '@/utils/check'
import { AnswerReq, transUrl } from '@/utils/ds'

export default {
  name: 'UserAddNote',
  components: {
    CenterBase,
    ShowProblem,
    VueEditor,
    AButton: Button
  },
  setup () {
    const route = useRoute()
    const VEditorContent = ref<InstanceType<typeof VueEditor> | null>()
    const question = ref<string>('#### 问题走失了')
    const content = ref<string>('')
    // 1 for answer; 2 for note
    const mode = ref<number>(0)
    const PID = ref<number>(0)
    const AID = ref<number>(0)
    const submitStatus = ref<boolean>(false)

    const setupQus = async () => {
      if (PID.value === 0) {
        return
      }

      const id = PID.value
      const resp = await getQusById(id)
      if (resp.status !== 200) {
        return
      }
      const r = resp.data
      if (r.code !== 0 || r.data === null) {
        return
      }
      const qusRaw = r.data
      const key = decodeID(qusRaw.lk)
      const header = decodeValue(qusRaw.rt, key)
      const content = decodeCT(header, qusRaw.ct, key)
      if (content === undefined) {
        return
      }
      if (content.has('question')) {
        const qus = content.get('question')
        if (qus !== undefined) {
          question.value = transUrl(qus)
        }
      }
    }

    const setupAnswer = async () => {
      if (PID.value === 0) {
        return
      }
      const response = await getUserAnswer(PID.value)
      if (response.status !== 200) {
        return
      }
      const resp = response.data
      if (resp.code !== 0 || resp.data === null) {
        return
      }
      AID.value = resp.data.id
      VEditorContent.value?.setEditorValue(resp.data.answer)
    }

    const getQusTxt = () => {
      const txt = VEditorContent.value?.getEditorValue()
      return txt === undefined ? '' : txt
    }

    const submitData = () => {
      const contentStr = getQusTxt()
      if (contentStr.length === 0) {
        return
      }
      submitStatus.value = true
      if (mode.value === 1) {
        // user add answer
        const data: AnswerReq = {
          pid: PID.value,
          aid: AID.value,
          content: contentStr
        }
        userAddAnswer(data)
          .then((response) => {
            submitStatus.value = false
            if (response.status !== 200) {
              message.warn('请求错误')
              return
            }
            const resp = response.data
            if (resp.code !== 0 || resp.data === null) {
              message.warn('返回错误')
              return
            }
            AID.value = resp.data as number
            message.info('提交成功')
          })
      }
    }

    const initFun = () => {
      setTimeout(() => {
        setupAnswer()
        setupQus()
      }, 1000)
    }

    onMounted(() => {
      const pid = route.params.pid as string
      PID.value = parseInt(pid)
      if (route.name === 'userAddAnswer') {
        mode.value = 1
      }

      initFun()
    })
    return {
      VEditorContent,
      question,
      content,
      submitStatus,
      submitData
    }
  }
}
</script>

<style scoped>

</style>
